<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include	file="pub/top.jsp"%>


	<%@ page import="java.util.List,java.util.Map"%>
<!-- 全局变量 函数定义区 -->
<%!%>
<!-- 实例变量 函数定义区 -->
<%
	//网页title
	String JSPTITLE = "";
%>

<!-- 样式添加区 -->
<link rel="stylesheet" href="<%=basePath%>DataTables/js/datatables.min.css">

<%@ include file="pub/head.jsp"%>
<!-- 下右内容区 -->
<div class="main-content-inner">
	<div class="breadcrumbs ace-save-state" id="breadcrumbs">
		<ul class="breadcrumb">
			<li>
				<i class="ace-icon fa fa-home home-icon"></i>
				<a href="#">Home</a>
			</li>
			<li class="active">任务管理</li>
		</ul>
	</div>
	<div class="page-content">
		<!-- page-header{ -->
		<div class="page-header">
			<h1>
				任务列表
				<small>
					<i class="ace-icon fa fa-angle-double-right"></i>
				</small>
			</h1>
		</div>
		<!-- }page-header  -->
		<!-- table header1{ -->
		<div class="row">
			<div class="col-xs-12">
				<div class="clearfix">
					<div class="pull-right tableTools-container"></div>
					<div class="">
						<div class="btn-group" style="margin-top: 5px">
							<a href="#" class="bt-refresh btn  btn-xs ">
								<i class="im-spinner10 fa-spin"></i>
								刷新
							</a>
							<a data-toggle="collapse" href="#demo" class="bt-search btn btn-xs">
								<i class="im-search"></i>
								搜索
							</a>
							<a href="projects.html" class="bt-add btn btn-xs">
								<i class="im-plus"></i>
								创建
							</a>
							<a href="projects.html" class="bt-spell btn btn-xs">
								<i class="im-spell-check"></i>
								审批
							</a>
						</div>
					</div>
				</div>
				<div id="demo" class="panel-collapse collapse ">
					<div class="panel-body well">
						<form>
							<div class="col-lg-6 col-sm-6 ">
								<div class="col-lg-12 col-sm-12  input-group ">
									<span class="input-group-addon">
										<i class="fa fa-calendar"></i>
									</span>
									<input type="email" placeholder="2014-11-17" class="input-sm form-control" />
									<span class="input-group-addon">到</span>
									<input type="text" class="input-sm form-control" name="end" value=""
										placeholder="2014-11-17" />
								</div>
							</div>
							<div class="col-lg-3 col-sm-3">
								<input type="text" class="input-sm  form-control" placeholder="编号" id="extn-search">
							</div>
							<div class="col-lg-3 col-sm-3 ">
								<select id="status-search" class="input-sm  form-control">
									<option value="">请选择状态</option>
									<option value="1">在线</option>
									<option value="0">离线</option>
								</select>
							</div>
							<div class="col-lg-12 col-sm-12">
								<button type="button" class="btn btn-success btn-sm  pull-right">
									<span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
									查找
								</button>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<!-- }table -header1  -->
		<!-- table header2{ -->
		<div class="row">
			<div class="col-xs-9 tablehead2L"></div>
			<div class="col-xs-3 tablehead2R">
				
			</div>
		</div>
		<!-- }table -header2  -->
		<!--  table { -->
		<div class="row">
			<div class="col-xs-12">
				<table id="myTable" class="table table-striped table-bordered" cellspacing="0"
					width="100%">
					<thead>
						<tr>
							<th>Name</th>
							<th>userid</th>
							<th>contact</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</div>
		</div>
		<!--}table  -->
		<!-- table end{ -->
		<div class="row">
			<div class="col-xs-4"></div>
			<div class="col-xs-8">
				<ul class="pagination"></ul>
			</div>
		</div>
		<!--}table end -->
	</div>
</div>
<!--  footer{ -->
<div class="footer">
	<div class="footer-inner">
		<div class="footer-content  pull_right">
			<span class="bigger-110">
				<span class="blue bolder"></span>
			</span>
		</div>
	</div>
</div>
<!--}  footer -->
<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
	<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
</a>
<script src="<%=basePath%>js/hyl.page.js"></script>
<%@ include file="pub/bottom.jsp"%>
<!-- 引入组件库 -->
<script src="<%=basePath%>DataTables/js/datatables.min.js"></script>
<!-- 自定义脚本 加载区 -->
<script>
  $(document).ready(function() {
    var table = $('#myTable').DataTable({
      dom : '',
      renderer : "bootstrap",
      paging : false,
      "ordering" : false,
      "searching" : false,
      "info" : false,
      buttons: [
        'colvis',  'pdf',{
          text: 'My button',
          action: function ( dt ) {
              console.log( 'My custom button!' );
          }
      }
      ],
      //stateSave: true,
      "language" : {
        "lengthMenu" : "每页 _MENU_ 条记录",
        "zeroRecords" : "没有找到记录",
        "info" : "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
        "infoEmpty" : "无记录",
        "infoFiltered" : "(从 _MAX_ 条记录过滤)"
      //, "decimal": ".", "thousands": "," ,
      },
      //列属性声明
      "columns" : [
          {
            title : "用户名"
          }, {
            title : "编号"
          }, {
            title : "联系方式"
          }
      ],
      //render特定列
      "columnDefs" : [
        {
          "render" : function(data, type, row) {
            return data + ' (' + row[2] + ')';
          },
          "targets" : 0
        }
      ],
      "footerCallback" : function(row, data, start, end, display) {
        //汇总统计回调函数
      }
    });
    //自定义的分页的函数,名字不要改 确保与page.js中的调用函数名一致;
    //载入数据的函数
    PG.load = function(n) {
      //需要传到后台的参数 	
      var data1 = {
        "rs_index" : (n - 1) * PG.pgSize,
        "rs_size" : PG.getMaxRcNum(),
        "where" : $("input[name='where']").val()
      };
      //用法: $.post("chargelist2.do", data1).success(function(rs) {});    	
      //解释: (去哪里,要做什么) 成功做完成以后{
      // 返回以后 做什么...
      //}
      $.post("demolist1.do", data1).success(function(result) {
        PG.bind({
          tableobj : table,
          pageobj : $(".pagination"),
          rs : result,
          pindex : n,
          psize : 0
        });
      });
    }
    PG.load(1);
    //行点击事件
    $('#myTable tbody').on('click', 'tr', function() {
      var data = table.row(this).data();
      alert('You clicked on ' + data[0] + '\'s row');
    });
  });
</script>
